<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05-事件处理</title>
    <script src="react.development.js" type="text/javascript" charset="UTF-8"></script>
    <script src="react-dom.development.js" type="text/javascript" charset="UTF-8"></script>
    <script src="babel.min.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
    <!--1、React事件的命名采用小驼峰
        2、React中不能通过return false的方式阻止默认行为，必须显式地使用preventDefault
    -->
    <div id="app">
        
    </div>
    <div id="other">
        <!--普通js点击事件可以是onclick/onClick
            React点击事件必须是onClick而且用大括号引起来<a href="#" onClick={handleClick}>React Click Me</a>
        -->
        <a href="#" onClick="actionClick()">JS Click Me</a>
    </div>
</body>
<script type="text/babel">
    function actionClick() {
        alert("您点击了js按钮");
    }
    
    //声明一个函数组件(组件名称必须以大写字母开头)
    function ActionLink() {
        function handleClick(e) {
            e.preventDefault();
            alert("您点击了React函数组件的按钮");
        }
        return (
            <a href="#" onClick={handleClick}>React Click Me</a>
        );
    }

    //声明一个class组件(组件名称必须以大写字母开头)
    class Toggle extends React.Component {
        constructor(props) {
            super(props);
            this.state = {isToggleOn: true};

            //this一致性方法1-1、在构造方法中绑定this
            //this.handleClick = this.handleClick.bind(this);
        }

        //this一致性方法2-2、使用箭头函数才能保证handleClick方法中的this和组件中的this一致
        //handleClick = ()=>{
        //    this.setState({
        //        isToggleOn: !this.state.isToggleOn
        //    });
        //}
        
        //this一致性方法1-2、在构造方法中绑定this/使用箭头函数调用方法
        handleClick() {
            this.setState({
                isToggleOn: !this.state.isToggleOn
            });
        }

        render(){
            //this一致性方法2-1、以普通方式调用方法但调用的方法是箭头函数
            //return (
            //    <button onClick={this.handleClick}>
            //        {this.state.isToggleOn ? 'on':'off'}
            //    </button>
            //);

            //this一致性方法1-1、使用箭头函数调用方法
            //return (
            //    <button onClick={()=>this.handleClick()}>
            //        {this.state.isToggleOn ? 'on':'off'}
            //    </button>
            //);

            //this一致性方法1-1、使用箭头函数调用方法、传一个参数
            //return (
            //    <button onClick={()=>this.handleClick(6)}>
            //        {this.state.isToggleOn ? 'on':'off'}
            //    </button>
            //);

            //this一致性方法1-1、使用箭头函数调用方法、传一个参数+事件对象
            //return (
            //    <button onClick={(e)=>this.handleClick(6,e)}>
            //        {this.state.isToggleOn ? 'on':'off'}
            //    </button>
            //);

            //this一致性方法1-1、调用方法时绑定this
            return (
                <button onClick={this.handleClick.bind(this)}>
                    {this.state.isToggleOn ? 'on':'off'}
                </button>
            );
        }
    }

    ReactDOM.render(
        <Toggle/>,
        document.getElementById("app")
    );
</script>
</html>